import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NzTabsModule } from 'ng-zorro-antd/tabs';

@Component({
  selector: 'lib-select-tabs',
  standalone: true,
  imports: [
    CommonModule,
    NzTabsModule,
  ],
  // templateUrl: './select-tabs.component.html',
  styleUrl: './select-tabs.component.css',
  template: `
    <nz-tabset 
    [nzSelectedIndex]="selectedTab"
    (nzSelectedIndexChange)="selectedTabIndexChange($event)"
    >
      @for (item of tabs; track $index) {
        <nz-tab nzTitle="{{ item.title }}">{{ item.content }}</nz-tab>
      }
       
    </nz-tabset>
  `
})
export class SelectTabsComponent {
  @Input() tabs: TabType[] = [];
  @Input() selectedTab: number = 0;
  //可选的selectedTabChange事件
  @Output() selectedTabChange = new EventEmitter<number>();

  selectedTabIndexChange(event: number) {
    this.selectedTabChange.emit(event);
  }

}

export interface TabType {
  title: string;
  content: string;
}